<template>
  <div class="login">
    <div class="title">植物高通量表型平台数据管理系统</div>
    <div class="form-tab">
      <!-- 登录表单区域 -->
      <el-tabs class="login-form">
        <!-- 1.账号密码登录 -->
        <el-tab-pane label="账号密码登录">
          <el-form :model="loginForm" :rules="accountRules" ref="userForm">
            <!-- 用户名 -->
            <el-form-item prop="username" class="el-form-item">
              <el-input placeholder="账号" clearable size="default" v-model="loginForm.username">
                <template #prefix>
                  <el-icon>
                    <User />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password" class="el-form-item">
              <el-input placeholder="密码" type="password" @keyup.enter.native="loginAccount" show-password size="default"
                v-model="loginForm.password">
                <template #prefix>
                  <el-icon>
                    <Lock />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 2.邮箱登录 -->
        <el-tab-pane label="邮箱登录">
          <el-form :model="loginForm" :rules="emailRules" ref="userForm">
            <!-- 邮箱号 -->
            <el-form-item prop="email" class="el-form-item">
              <el-input size="default" placeholder="邮箱账号" clearable v-model="loginForm.email">
                <template #prefix>
                  <el-icon>
                    <Message />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
            <!-- 验证码 -->
            <el-form-item prop="code">
              <el-input size="default" placeholder="验证码" style="width: 210px" v-model="loginForm.code">
                <template #prefix>
                  <el-icon>
                    <Lock />
                  </el-icon>
                </template>
              </el-input>
              <el-button type="primary" size="default">获取验证码</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 3.手机验证登录 -->
        <el-tab-pane label="手机验证登录">
          <el-form :model="loginForm" :rules="phoneRules" ref="userForm">
            <!-- 手机号 -->
            <el-form-item prop="phoneNumber" class="el-form-item">
              <el-input size="mini" placeholder="手机号" clearable v-model="loginForm.phoneNumber">
                <template #prefix>
                  <el-icon>
                    <Iphone />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
            <!-- 验证码 -->
            <el-form-item prop="code" class="el-form-item">
              <el-input size="mini" placeholder="验证码" style="width:210px" v-model="loginForm.code">
                <template #prefix>
                  <el-icon>
                    <Lock />
                  </el-icon>
                </template>
              </el-input>
              <el-button type="primary" size="mini" @click="sendPhoneCode(1)">获取验证码</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <!-- 按钮区域 -->
      <el-form-item class="login-btn">
        <el-button type="primary" size="default" @click="loginAccount">登录</el-button>
        <el-button type="primary" size="default" @click="$router.push('/Register')">注册</el-button>
        <el-button text style="color: white" size="default" @click="handlePass1">
          邮箱找回
        </el-button>
        <el-button text style="color: white" size="default" @click="handlePass2">
          手机找回
        </el-button>
      </el-form-item>
    </div>
    <div class="copyright">
      版权所有:&nbsp;&nbsp;北京市农林科学院信息技术研究中心&nbsp;&nbsp;数字植物实验室
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { userLogin } from "@/api/user.js";
import { getCurrentInstance } from "vue";
import Cookies from "js-cookie";
import { setDynamicRoutes } from "@/router/index.js";

const { proxy } = getCurrentInstance();

const loginForm = ref({
  // username: "",
  // password: "",
  // email: "",
  // code: "",
  // phoneNumber: "",
});

// 三种登录方式的验证规则
const accountRules = ref({
  username: [
    { required: true, message: "请输入账号", trigger: "blur" },
    { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
  ],
});

// const emailRules = ref({
//   email: [
//     { required: true, message: "请输入邮箱", trigger: "blur" },
//     { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" },
//   ],
//   code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
// });

// const phoneRules = ref({
//   phoneNumber: [
//     { required: true, message: "请输入手机号", trigger: "blur" },
//     { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号", trigger: "blur" },
//   ],
//   code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
// });



function loginAccount() {
  proxy.$refs.userForm.validate(valid => {
    if (valid) {
      userLogin(loginForm.value).then(res => {
        console.log("用户名", loginForm.value.username, "密码", loginForm.value.password);
        if (res.code === '200') {
          Cookies.set("username", loginForm.value.username, { expires: 30 });
          // TODO: 密码加密存储
          Cookies.set("password", loginForm.value.password, { expires: 30 });
          // 保存该用户的菜单权限到浏览器
          localStorage.setItem("menus", JSON.stringify(res.data.menus));
          setDynamicRoutes();
          // 登录成功，跳转到首页
          proxy.$router.push("/working/WorkingConditionByIns");
        }
      });
    } else {
      console.log("信息校验失败");
    }
  });

}
</script>

<style lang="scss" scoped>
// div{
//   border: 1px solid black;
// }

.login {
  // 使用flex弹性布局，设置垂直排列，并使其中子元素水平垂直居中
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background-image: url("../assets/images/login_bg.jpg");
  background-size: cover;
}

// 1.标题区域
.title {
  font-family: "字体传奇特战体";
  font-size: 43px;
  color: white;
  text-shadow: 0px 0px 5px #286a8d;
  text-shadow: 0px 0px 10px #b8fdf9;
}

// 2.1 中间表单区域，设置背景
.form-tab {
  width: 610px;
  height: 500px;

  // border: 1px solid black;
  background-image: url("../assets/images/login_form_bg.png");
  background-size: cover;
  background-position: center;

  // 使用flex弹性布局，并使其中子元素水平垂直居中
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

// 修改el-tabs上字体的颜色
::v-deep(.el-tabs__item) {
  color: white !important;
}

.login-form {
  width: 500px;
}

// 3.版权区域
.copyright {
  margin-top: 20px;
  color: #b8fdf9;
}
</style>
